<template>
  <section class="process-steps-section">
    <h2 class="section-title">{{ title }}</h2>
    <div class="steps-container">
      <div
          v-for="(step, index) in steps"
          :key="index"
          class="step-item"
      >
        <div class="step-number">{{ index + 1 }}</div>
        <h3 class="step-title">{{ step.title }}</h3>
        <p class="step-description">{{ step.description }}</p>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '三步完成简历蜕变'
  },
  steps: {
    type: Array,
    default: () => [
      {
        title: '上传原始简历',
        description: '支持多格式文件上传'
      },
      {
        title: 'AI智能诊断',
        description: '生成详细优化报告'
      },
      {
        title: '下载优化版本',
        description: '多模板格式选择'
      }
    ]
  }
})
</script>

<style lang="scss" scoped>
.process-steps-section {
  padding: 2rem 0;
  background: white;

  .section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
  }

  .steps-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 25%;
      left: 50%;
      width: 60%;
      height: 2px;
      background: #409EFF;
      transform: translateX(-50%);
      z-index: 0;
    }
  }

  .step-item {
    text-align: center;
    z-index: 1;
    background: white;
    padding: 0 1rem;

    .step-number {
      width: 50px;
      height: 50px;
      background: #409EFF;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 1rem;
      font-weight: bold;
    }

    .step-title {
      margin: 0.5rem 0;
      font-size: 1.2rem;
    }

    .step-description {
      color: #909399;
      font-size: 0.95rem;
    }
  }

  @media (max-width: 768px) {
    .steps-container {
      flex-direction: column;
      align-items: center;
      gap: 3rem;

      &::before {
        display: none;
      }
    }
  }
}
</style>